﻿<!DOCTYPE HTML>
<html>
<head>
    <!--_meta 作为公共模版分离出去-->
    <% layout("/common/_meta.html",{title:"首页"}){} %>
    <!--_meta 作为公共模版分离出去-->
</head>
<body>
<div class="wap-container">
    <article class="Hui-admin-content clearfix">
        <div class="row-24 clearfix" style="margin-left: -12px; margin-right: -12px;">
            <div class="col-24-xs-24 col-24-sm-12 col-24-md-12 col-24-lg-12 col-24-xl-6"
                 style="padding-left: 12px; padding-right: 12px; margin-bottom: 24px;">
                <div class="panel">
                    <div class="panel-header" style="padding:15px 24px;font-weight: 400;color:#999;">总销售额：</div>
                    <div class="panel-body" style="padding:0 24px;">
                        <div class="c-primary" style="font-size: 30px;line-height: 38px;padding-bottom: 24px;">
                            &yen; ${allMoney}
                        </div>
                        <div class="f-14" style="padding: 10px 0;border-top:solid 1px #eee"><span
                                class="c-999">今日销售额</span> <span>&yen; ${todayMoney}</span></div>
                    </div>
                </div>
            </div>
            <div class="col-24-xs-24 col-24-sm-12 col-24-md-12 col-24-lg-12 col-24-xl-6"
                 style="padding-left: 12px; padding-right: 12px; margin-bottom: 24px;">
                <div class="panel">
                    <div class="panel-header" style="padding:15px 24px;font-weight: 400;color:#999;">总访问量：</div>
                    <div class="panel-body" style="padding:0 24px;">
                        <div class="c-success" style="font-size: 30px;line-height: 38px;padding-bottom: 24px;">
                            ${allVisit}
                        </div>
                        <div class="f-14" style="padding: 10px 0;border-top:solid 1px #eee"><span
                                class="c-999">今日访问量</span> <span>${todayVisit}</span></div>
                    </div>
                </div>
            </div>
            <div class="col-24-xs-24 col-24-sm-12 col-24-md-12 col-24-lg-12 col-24-xl-6"
                 style="padding-left: 12px; padding-right: 12px; margin-bottom: 24px;">
                <div class="panel">
                    <div class="panel-header" style="padding:15px 24px;font-weight: 400;color:#999;">总会员数：</div>
                    <div class="panel-body" style="padding:0 24px;">
                        <div class="c-danger" style="font-size: 30px;line-height: 38px;padding-bottom: 24px;">
                            ${allUser} 人
                        </div>
                        <div class="f-14" style="padding: 10px 0;border-top:solid 1px #eee"><span
                                class="c-999">今日新增会员</span> <span>${todayUser} 人</span></div>
                    </div>
                </div>
            </div>
            <div class="col-24-xs-24 col-24-sm-12 col-24-md-12 col-24-lg-12 col-24-xl-6"
                 style="padding-left: 12px; padding-right: 12px; margin-bottom: 24px;">
                <div class="panel">
                    <div class="panel-header" style="padding:15px 24px;font-weight: 400;color:#999;">商品总数：</div>
                    <div class="panel-body" style="padding:0 24px;">
                        <div class="c-warning" style="font-size: 30px;line-height: 38px;padding-bottom: 24px;">
                            ${allItem}
                        </div>
                        <div class="f-14" style="padding: 10px 0;border-top:solid 1px #eee"><span
                                class="c-999">今日新增商品</span> <span>${todayItem}</span></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 4 -->
        <div class="panel">
            <div class="panel-body">
                <div class="row clearfix">
                    <div class="col-xs-12">
                        <div class="panel">
                            <div class="panel-header">
                                会员概况
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-sm-12 Hui-admin-datatime-tag" style="text-align:right;padding-bottom: 20px;">
                                        <span class="active">今天</span>
                                        <span>3天</span>
                                        <span>7天</span>
                                        <span>30天</span>
                                        <span>90天</span>
                                        <span>半年</span>
                                        <span>1年</span>
                                        <span>全部</span>
                                        <span>自定义</span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-3">
                                        <div id="echarts-1-1" style="height:170px"></div>
                                        <div class="text-c f-14 c-666">项目1</div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div id="echarts-1-2" style="height:170px"></div>
                                        <div class="text-c f-14 c-666">项目2</div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div id="echarts-1-3" style="height:170px"></div>
                                        <div class="text-c f-14 c-666">项目3</div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div id="echarts-1-4" style="height:170px"></div>
                                        <div class="text-c f-14 c-666">项目4</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row clearfix mt-20">
                    <div class="col-xs-6">
                        <div class="panel">
                            <div class="panel-header">
                                手机号统计
                            </div>
                            <div class="panel-body">
                                <div id="charts-1" style="height:300px"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="panel">
                            <div class="panel-header">
                                性别完善情况
                            </div>
                            <div class="panel-body">
                                <div id="charts-2" style="height:300px"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row clearfix mt-20">
                    <div class="col-xs-6">
                        <div class="panel">
                            <div class="panel-header">
                                生肖分布统计
                            </div>
                            <div class="panel-body">
                                <div id="charts-3" style="height:300px"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="panel">
                            <div class="panel-header">
                                性别统计
                            </div>
                            <div class="panel-body">
                                <div id="charts-4" style="height:300px"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 3 -->
        <div class="panel">
            <div class="panel-body">
                <div class="row clearfix">
                    <div class="col-xs-6">
                        <div class="panel">
                            <div class="panel-header">
                                手机号运营商统计
                            </div>
                            <div class="panel-body">
                                <div id="echarts3-1" style="height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="panel">
                            <div class="panel-header">
                                已经完善生日年龄统计
                            </div>
                            <div class="panel-body">
                                <div id="echarts3-2" style="height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel">
            <div class="panel-body">
                <div class="row clearfix">
                    <div class="col-xs-12">
                        <div class="panel">
                            <div class="panel-header">
                                折线图
                            </div>
                            <div class="panel-body">
                                <div class="Hui-admin-datetime-select">
                                    <span onclick="newUser('day',this)" class="active">天</span>
                                    <span onclick="newUser('week',this)">周</span>
                                    <span onclick="newUser('month',this)">月</span>
                                </div>
                                <div id="echarts1-1" style="height: 400px"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel">
            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel">
                            <div class="panel-header">
                                散点图
                            </div>
                            <div class="panel-body pos-r">
                                <div id="echarts5-1" style="height:520px"></div>
                                <div id="echarts5-operate-7-modal" style="display:none;width: 240px;background-color: #fff;padding: 20px;z-index: 9;position: absolute;top: 200px; left: 50%;margin-left: -120px;border: solid 1px #ccc;">
                                    <input type="text" value="" class="input-text" style="width:200px;display:inline-block;" />
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </article>
    <footer class="footer Hui-admin-footer">
        <p>
            感谢jQuery、layer、laypage、Validform、UEditor、iconfont、Datatables、WebUploaded、icheck、highcharts、bootstrap-Switch<br>
            Copyright &copy;2015 h-ui.admin.pro v1.0 All Rights Reserved.
        </p>
    </footer>
</div>
<!--_footer 作为公共模版分离出去-->
<% layout("/common/_footer.html"){} %>
<script type="text/javascript" src="${ctxPath}/static/lib/echarts/4.1.0.rc2/echarts.min.js"></script>
<!--/_footer /作为公共模版分离出去-->
<script type="text/javascript">
    $(function () {
        // 占比
        var echarts1_1 = echarts.init(document.getElementById('echarts-1-1'));
        var echarts1_1_option = {
            title: {
                text: '70%',
                x: 'center',
                y: 'center',
                textStyle: {
                    fontWeight: 'normal',
                    color: '#333',
                    fontSize: 30
                }
            },
            color: ['#1890ff', '#eeeeee'],
            tooltip: {
                trigger: 'item',
                formatter: "{b}: {c} ({d}%)",
            },
            label: {
                show: false,
            },
            series: [
                {
                    type:'pie',
                    radius: ['65%', '80%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    label: {
                        show: false,
                    },
                    data:[
                        {value:70, name:'完成'},
                        {value:30, name:'未完成'}
                    ]
                }
            ],
        };
        echarts1_1.setOption(echarts1_1_option);


        var echarts1_2 = echarts.init(document.getElementById('echarts-1-2'));
        var echarts1_2_option = {
            title: {
                text: '65%',
                x: 'center',
                y: 'center',
                textStyle: {
                    fontWeight: 'normal',
                    color: '#333',
                    fontSize: 30
                }
            },
            color: ['#e87b78', '#eeeeee'],
            tooltip: {
                trigger: 'item',
                formatter: "{b}: {c} ({d}%)",
            },
            label: {
                show: false,
            },
            series: [
                {
                    type:'pie',
                    radius: ['65%', '80%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    label: {
                        show: false,
                    },
                    data:[
                        {value:65, name:'完成'},
                        {value:35, name:'未完成'}
                    ]
                }
            ],
        };
        echarts1_2.setOption(echarts1_2_option);

        var echarts1_3 = echarts.init(document.getElementById('echarts-1-3'));
        var echarts1_3_option = {
            title: {
                text: '80%',
                x: 'center',
                y: 'center',
                textStyle: {
                    fontWeight: 'normal',
                    color: '#333',
                    fontSize: 30
                }
            },
            color: ['#61be67', '#eeeeee'],
            tooltip: {
                trigger: 'item',
                formatter: "{b}: {c} ({d}%)",
            },
            label: {
                show: false,
            },
            series: [
                {
                    type:'pie',
                    radius: ['65%', '80%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    label: {
                        show: false,
                    },
                    data:[
                        {value:80, name:'完成'},
                        {value:20, name:'未完成'}
                    ]
                }
            ],
        };
        echarts1_3.setOption(echarts1_3_option);

        var echarts1_4 = echarts.init(document.getElementById('echarts-1-4'));
        var echarts1_4_option = {
            title: {
                text: '55%',
                x: 'center',
                y: 'center',
                textStyle: {
                    fontWeight: 'normal',
                    color: '#333',
                    fontSize: 30
                }
            },
            color: ['#4da7fd', '#eeeeee'],
            tooltip: {
                trigger: 'item',
                formatter: "{b}: {c} ({d}%)",
            },
            label: {
                show: false,
            },
            series: [
                {
                    type:'pie',
                    radius: ['65%', '80%'],
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    label: {
                        show: false,
                    },
                    data:[
                        {value:55, name:'完成'},
                        {value:45, name:'未完成'}
                    ]
                }
            ],
        };
        echarts1_4.setOption(echarts1_4_option);

        // 饼状1
        var echarts1 = echarts.init(document.getElementById('charts-1'));
        var echarts1_option = {
            title : {
                text: '总数',
                subtext: '37568',
                x:'center',
                textStyle: {
                    fontSize: 18,
                },
                subtextStyle: {
                    color: '#595959',
                    fontSize: 16,
                }
            },
            tooltip : {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            label: {
                show: true,
                formatter: function(param) {
                    return param.name + '\n' + param.value + ',  ' + Math.round(param.percent) + '%';
                }
            },
            legend: {
                x : 'center',
                y : 'bottom',
                data:['有效手机号','错误手机号','手机号信息为空']
            },
            series : [
                {
                    name:'手机号质量',
                    type: 'pie',
                    radius : '65%',
                    center: ['50%', '50%'],
                    selectedMode: 'single',
                    color: ['#1890ff', '#df5667', '#888888'],
                    data:[
                        {
                            value: 1000,
                            name: '有效手机号',
                        },
                        {
                            value: 520,
                            name: '错误手机号',
                        },
                        {
                            value: 460,
                            name: '手机号信息为空',
                        }
                    ]
                }
            ]
        }
        echarts1.setOption(echarts1_option);


        // 饼状2
        var echarts2 = echarts.init(document.getElementById('charts-2'));
        var echarts2_option = {
            title : {
                text: '',
                x:'center',
                y: 'center',
                textStyle: {
                    fontSize: 30,
                }
            },
            color: ['#1890ff', '#eeeeee'],
            tooltip: {
                show: false,
            },
            legend: {
                x : 'center',
                y : 'bottom',
                data:['已完善','未完善']
            },
            series: [
                {
                    type:'pie',
                    radius: ['60%', '70%'],
                    labelLine: {
                        show: false,
                    },
                    avoidLabelOverlap: false,
                    hoverAnimation: false,
                    data:[
                        {
                            value: 70,
                            name: '已完善',
                            label: {
                                position: 'center',
                                formatter: "{b} {d}%",
                                fontSize: 18,
                            },
                        },
                        {
                            value: 30,
                            name: '未完善',
                            label: {
                                show:false,
                            }
                        },
                    ]
                }
            ]
        }
        echarts2.setOption(echarts2_option);

        // 星座分布统计 - 生肖
        var echarts3 = echarts.init(document.getElementById('charts-3'));
        var echarts3_option = {
            title : {
                text: '',
                textStyle: {
                    fontSize: 18,
                }
            },
            color: ['#1890ff'],
            tooltip: {
                trigger: 'item',
                formatter: "{b}: {c} ({d}%)"
            },
            series: [
                {
                    type:'pie',
                    roseType: 'area',
                    radius: ['0%', '70%'],
                    label: {
                        show: false,
                    },
                    itemStyle: {
                        color: 'white',
                        borderColor: '#1890ff'
                    },
                    avoidLabelOverlap: false,
                    data:[
                        {
                            name: '鼠',
                            value: 8,
                        },
                        {
                            name: '牛',
                            value: 8,
                        },
                        {
                            name: '虎',
                            value: 8,
                        },
                        {
                            name: '兔',
                            value: 9,
                        },
                        {
                            name: '龙',
                            value: 7,
                        },
                        {
                            name: '蛇',
                            value: 5,
                        },
                        {
                            name: '马',
                            value: 22,
                        },
                        {
                            name: '羊',
                            value: 8,
                        },
                        {
                            name: '猴',
                            value: 12,
                        },
                        {
                            name: '鸡',
                            value: 16,
                        },
                        {
                            name: '狗',
                            value: 14,
                        },
                        {
                            name: '猪',
                            value: 23,
                        },
                    ]
                },
                {
                    type: 'pie',
                    hoverOffset: 0,
                    data: [
                        {
                            value: 1,
                            name: '鼠',
                        },
                        {
                            value: 1,
                            name: '牛',
                        },
                        {
                            value: 1,
                            name: '虎',
                        },
                        {
                            value: 1,
                            name: '兔',
                        },
                        {
                            value: 1,
                            name: '龙',
                        },
                        {
                            value: 1,
                            name: '蛇',
                        },
                        {
                            value: 1,
                            name: '马',
                        },
                        {
                            value: 1,
                            name: '羊',
                        },
                        {
                            value: 1,
                            name: '猴',
                        },
                        {
                            value: 1,
                            name: '鸡',
                        },
                        {
                            value: 1,
                            name: '狗',
                        },
                        {
                            value: 1,
                            name: '猪',
                        }
                    ],
                    radius: ['70%', '90%'],
                    zlevel: -2,
                    itemStyle: {
                        borderColor: 'white',
                    },
                    markArea: {
                        markArea: false
                    },
                    emphasis: {
                        itemStyle: {
                            color: ['#2593f9'],
                        }
                    },
                    label: {
                        show: true,
                        position: 'inside',
                    }
                }
            ]
        }
        echarts3.setOption(echarts3_option);

        // 饼状1
        var echarts4 = echarts.init(document.getElementById('charts-4'));
        var echarts4_option = {
            title : {
                text: '总数',
                subtext: '37568',
                x:'center',
                textStyle: {
                    fontSize: 18,
                },
                subtextStyle: {
                    color: '#595959',
                    fontSize: 16,
                }
            },
            tooltip : {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            label: {
                show: true,
                formatter: function(param) {
                    return param.name + '\n' + param.value + ',  ' + Math.round(param.percent) + '%';
                }
            },
            legend: {
                x : 'center',
                y : 'bottom',
                data:['男','女','']
            },
            series : [
                {
                    name:'男',
                    type: 'pie',
                    radius : '65%',
                    center: ['50%', '50%'],
                    selectedMode: 'single',
                    color: ['#1890ff', '#e87b78'],
                    data:[
                        {
                            value: 1000,
                            name: '男',
                        },
                        {
                            value: 520,
                            name: '女',
                        },
                    ]
                }
            ]
        }
        echarts4.setOption(echarts4_option);
    });
</script>
<script type="text/javascript">
    $(function () {
        // 手机号运营商
        var echarts1 = echarts.init(document.getElementById('echarts3-1'));
        var echarts1_option = {
            title: {
                show: false
            },
            color: ['#1890ff'],
            tooltip: {
                trigger: 'item',
            },
            grid: {
                top: '3%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: ['其他','电信','移动','联通']
            },
            barWidth : 24,
            emphasis: {
                itemStyle: {
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 2,
                }
            },
            series: [
                {
                    type: 'bar',
                    data : [200, 700, 800, 900],
                }
            ]
        }
        echarts1.setOption(echarts1_option);

        // 已经完善生日年龄统计
        var echarts2 = echarts.init(document.getElementById('echarts3-2'));
        var echarts2_option = {
            title : {
                show: false
            },
            color: '#1890ff',
            grid: {
                top: '3%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['10岁以下', '10-15岁', '16-20岁', '21-25岁', '26-30岁', '31-35岁', '36-40岁', '41-45岁', '46-50岁', '50岁以上']
            },
            yAxis: {
                type: 'value'
            },
            label: {
                fontSize: 14,
                color: '#666',
            },
            series: [
                {
                    data: [10, 30, 35, 34, 50, 45, 43, 37, 30, 8],
                    type: 'bar',
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    barWidth : 24,
                }
            ]
        }
        echarts2.setOption(echarts2_option);
    });
</script>
<script type="text/javascript">
    function newUser(type,obj){
        $(obj).parent().find("span").removeClass("active");
        $(obj).addClass("active");
        var xData = [];
        var yData1 = [];
        var yData2 = [];

        // 天
        if(type == 'day'){
            xData = [
                '2023-05-01',
                '2023-05-02',
                '2023-05-03',
                '2023-05-04',
                '2023-05-05',
                '2023-05-06',
                '2023-05-07',
                '2023-05-08',
                '2023-05-09',
                '2023-05-10',
                '2023-05-11',
                '2023-05-12',
                '2023-05-12',
                '2023-05-13',
                '2023-05-14',
                '2023-05-15',
                '2023-05-16',
                '2023-05-17',
                '2023-05-18',
                '2023-05-19',
                '2023-05-20',
                '2023-05-21',
                '2023-05-22',
                '2023-05-23',
                '2023-05-24',
                '2023-05-25',
                '2023-05-26',
                '2023-05-27',
                '2023-05-28',
                '2023-05-29',
                '2023-05-30',
                '2023-05-31',
            ];
            yData1 =[
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
                1400,
                1200,
            ];
            yData2 = [
                120,
                140,
                120,
                140,
                120,
                140,
                120,
                140,
                120,
                120,
                20,
                100,
                39,
                49,
                38,
                78,
                5,
                66,
                33,
                22,
                44,
                55,
                23,
                11,
                32,
                34,
                55,
                22,
                33,
                55,
                77,
            ];
        }

        // 周
        if(type == 'week') {
            xData = [];
            yData1 = [];
            yData2 = [];
        }

        // 月
        if(type == 'month'){
            xData = [];
            yData1 = [];
            yData2 = [];
        }
        var echarts1 = echarts.init(document.getElementById('echarts1-1'));
        var echarts1_option = {
            title: {
                show: false,
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                x : 'center',
                y : 'top',
                data: ['会员','非会员']
            },
            xAxis: {
                data: xData,
            },
            yAxis:{
                type: 'value',
                nameTextStyle: {
                    // 坐标轴名称的文字样式
                },
                axisLine: {
                    // 坐标轴轴线相关设置
                }
            },
            series: [
                {
                    name: '会员',
                    type: 'line',
                    symbolSize:10,
                    symbol:'circle',
                    itemStyle: {
                        color: '#1bb495',
                        bborderColor: '#fff',
                        borderWidth: 2,
                    },
                    data: yData1,
                },
                {
                    name: '非会员',
                    type: 'line',
                    symbolSize:10,
                    symbol:'circle',
                    itemStyle: {
                        color: '#25c6c8',
                        borderColor: '#fff',
                        borderWidth: 2,
                    },
                    data: yData2,
                }
            ]
        }
        echarts1.setOption(echarts1_option);
    }

    $(function () {
        newUser('day'); // 默认天
    });
</script>
<script type="text/javascript">
    function rfm(type){
        var Data1 = [
            [161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
            [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
            [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
            [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
            [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
            [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
            [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
            [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
            [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
            [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
            [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
            [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
            [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
            [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
            [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
            [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
            [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
            [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
            [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
            [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
            [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
            [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
            [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
            [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
            [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
            [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
            [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
            [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
            [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
            [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
            [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
            [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
            [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
            [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
            [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
            [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
            [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
            [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
            [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
            [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
            [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
            [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
            [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
            [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
            [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
            [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
            [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
            [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
            [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
            [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
            [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
            [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
        ];
        var Data2 =[
            [174.0, 65.6],
            [175.3, 71.8],
            [193.5, 80.7],
            [186.5, 72.6],
            [187.2, 78.8],
            [181.5, 74.8],
            [184.0, 86.4],
            [184.5, 78.4],
            [175.0, 62.0],
            [184.0, 81.6],
            [180.0, 76.6],
            [177.8, 83.6],
            [192.0, 90.0],
            [176.0, 74.6],
            [174.0, 71.0],
            [184.0, 79.6],
            [192.7, 93.8],
            [171.5, 70.0],
            [173.0, 72.4],
            [176.0, 85.9],
            [176.0, 78.8],
            [180.5, 77.8],
            [172.7, 66.2],
            [176.0, 86.4],
            [173.5, 81.8],
            [178.0, 89.6],
            [180.3, 82.8],
            [180.3, 76.4],
            [164.5, 63.2],
            [173.0, 60.9],
            [183.5, 74.8],
            [175.5, 70.0],
            [188.0, 72.4],
            [189.2, 84.1],
            [172.8, 69.1],
            [170.0, 59.5],
            [182.0, 67.2],
            [170.0, 61.3],
            [177.8, 68.6],
            [184.2, 80.1],
            [186.7, 87.8],
            [171.4, 84.7],
            [172.7, 73.4],
            [175.3, 72.1],
            [180.3, 82.6],
            [182.9, 88.7],
            [188.0, 84.1],
            [177.2, 94.1],
            [172.1, 74.9],
            [167.0, 59.1],
            [169.5, 75.6],
            [174.0, 86.2],
            [172.7, 75.3],
            [182.2, 87.1],
            [164.1, 55.2],
            [163.0, 57.0],
            [171.5, 61.4],
            [184.2, 76.8],
            [174.0, 86.8],
            [174.0, 72.2],
            [177.0, 71.6],
            [186.0, 84.8],
            [167.0, 68.2],
            [171.8, 66.1],
            [182.0, 72.0],
            [167.0, 64.6],
            [177.8, 74.8],
            [164.5, 70.0],
            [192.0, 101.6],
            [175.5, 63.2],
            [171.2, 79.1],
            [181.6, 78.9],
            [167.4, 67.7],
            [181.1, 66.0],
            [177.0, 68.2],
            [174.5, 63.9],
            [177.5, 72.0],
            [170.5, 56.8],
            [182.4, 74.5],
            [197.1, 90.9],
            [180.1, 93.0],
            [175.5, 80.9],
            [180.6, 72.7],
            [184.4, 68.0],
            [175.5, 70.9],
            [180.6, 72.5],
            [177.0, 72.5],
            [177.1, 83.4],
            [181.6, 75.5],
            [176.5, 73.0],
            [175.0, 70.2],
            [174.0, 73.4],
            [165.1, 70.5],
            [177.0, 68.9],
            [192.0, 102.3],
            [176.5, 68.4],
            [169.4, 65.9],
            [182.1, 75.7],
            [179.8, 84.5],
            [175.3, 87.7],
            [184.9, 86.4],
            [177.3, 73.2],
            [167.4, 53.9],
            [178.1, 72.0],
            [168.9, 55.5],
            [157.2, 58.4],
            [180.3, 83.2],
            [170.2, 72.7],
            [177.8, 64.1],
            [172.7, 72.3],
            [165.1, 65.0],
            [186.7, 86.4],
            [165.1, 65.0],
            [174.0, 88.6],
            [175.3, 84.1],
            [185.4, 66.8],
            [177.8, 75.5],
            [180.3, 93.2],
            [180.3, 82.7],
            [177.8, 58.0],
            [177.8, 79.5],
            [177.8, 78.6],
            [177.8, 71.8],
            [177.8, 116.4],
            [163.8, 72.2],
            [188.0, 83.6],
            [198.1, 85.5],
            [175.3, 90.9],
            [166.4, 85.9],
            [190.5, 89.1],
            [166.4, 75.0],
            [177.8, 77.7],
            [179.7, 86.4],
            [172.7, 90.9],
            [190.5, 73.6],
            [185.4, 76.4],
            [168.9, 69.1],
            [167.6, 84.5],
            [175.3, 64.5],
            [170.2, 69.1],
            [190.5, 108.6],
            [177.8, 86.4],
            [190.5, 80.9],
            [177.8, 87.7],
            [184.2, 94.5],
            [176.5, 80.2],
            [177.8, 72.0],
            [180.3, 71.4],
            [171.4, 72.7],
            [172.7, 84.1],
            [172.7, 76.8],
            [177.8, 63.6],
            [177.8, 80.9],
            [182.9, 80.9],
            [170.2, 85.5],
            [167.6, 68.6],
            [175.3, 67.7],
            [165.1, 66.4],
            [185.4, 102.3],
            [181.6, 70.5],
            [172.7, 95.9],
            [190.5, 84.1],
            [179.1, 87.3],
            [175.3, 71.8],
            [170.2, 65.9],
            [193.0, 95.9],
            [171.4, 91.4],
            [177.8, 81.8],
            [177.8, 96.8],
            [167.6, 69.1],
            [167.6, 82.7],
            [180.3, 75.5],
            [182.9, 79.5],
            [176.5, 73.6],
            [186.7, 91.8],
            [188.0, 84.1],
            [188.0, 85.9],
            [177.8, 81.8],
            [174.0, 82.5],
            [177.8, 80.5],
            [171.4, 70.0],
            [185.4, 81.8],
            [185.4, 84.1],
            [188.0, 90.5],
            [188.0, 91.4],
            [182.9, 89.1],
            [176.5, 85.0],
            [175.3, 69.1],
            [175.3, 73.6],
            [188.0, 80.5],
            [188.0, 82.7],
            [175.3, 86.4],
            [170.5, 67.7],
            [179.1, 92.7],
            [177.8, 93.6],
            [175.3, 70.9],
            [182.9, 75.0],
            [170.8, 93.2],
            [188.0, 93.2],
            [180.3, 77.7],
            [177.8, 61.4],
            [185.4, 94.1],
            [168.9, 75.0],
            [185.4, 83.6],
            [180.3, 85.5],
            [174.0, 73.9],
            [167.6, 66.8],
            [182.9, 87.3],
            [160.0, 72.3],
            [180.3, 88.6],
            [167.6, 75.5],
            [186.7, 101.4],
            [175.3, 91.1],
            [175.3, 67.3],
            [175.9, 77.7],
            [175.3, 81.8],
            [179.1, 75.5],
            [181.6, 84.5],
            [177.8, 76.6],
            [182.9, 85.0],
            [177.8, 102.5],
            [184.2, 77.3],
            [179.1, 71.8],
            [176.5, 87.9],
            [188.0, 94.3],
            [174.0, 70.9],
            [167.6, 64.5],
            [170.2, 77.3],
            [167.6, 72.3],
            [188.0, 87.3],
            [174.0, 80.0],
            [176.5, 82.3],
            [180.3, 73.6],
            [167.6, 74.1],
            [188.0, 85.9],
            [180.3, 73.2],
            [167.6, 76.3],
            [183.0, 65.9],
            [183.0, 90.9],
            [179.1, 89.1],
            [170.2, 62.3],
            [177.8, 82.7],
            [179.1, 79.1],
            [190.5, 98.2],
            [177.8, 84.1],
            [180.3, 83.2],
            [180.3, 83.2]
        ];
        var echarts1 = echarts.init(document.getElementById('echarts5-1'));
        var echarts1_option = {
            title : {
                show: false
            },
            grid: {
                left: '3%',
                right: '7%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type : 'value',
                scale: true,
                axisLabel: {
                    formatter: '{value}'
                },
            },
            yAxis:{
                type: 'value',
                scale: true,
                axisLabel: {
                    formatter: '{value}'
                },
            },
            tooltip: {
                showDelay : 0,
                formatter : function (params) {
                    if (params.value.length > 1) {
                        return params.seriesName + ' :<br/>'
                            + params.value[0] + '，'
                            + params.value[1];
                    }
                    else {
                        return params.seriesName + ' :<br/>'
                            + params.name + ' : '
                            + params.value;
                    }
                },
                axisPointer:{
                    show: false,
                    type : 'cross',
                    lineStyle: {
                        type : 'dashed',
                        width : 1
                    }
                }
            },
            toolbox: {
                feature: {
                    dataZoom: {},
                    // restore: {},
                    // dataView: {},
                    brush: {
                        type: ['rect', 'clear'],
                        title: {
                            rect: '矩形选择',
                            clear: '清除选择',
                        },
                    }
                }
            },
            brush: {
                geoIndex: 'all',
                xAxisIndex: 'all',
                yAxisIndex: 'all',
                throttleType: 'debounce',
                throttleDelay: 300,
            },
            markArea: {
                silent: true,
            },
            series: [
                {
                    name: '实盘1',
                    type:'scatter',
                    data: Data1,
                    itemStyle: {
                        color: '#1890ff'
                    },
                    markPoint: {
                        data: [
                            {
                                type: 'max',
                                name: '最大值'
                            },
                            {
                                type: 'min',
                                name: '最小值'
                            }
                        ]
                    },
                },
                {
                    name: '实盘2',
                    type:'scatter',
                    data: Data2,
                    itemStyle: {
                        color: '#61be67'
                    },
                    markPoint: {
                        data: [
                            {
                                type: 'max',
                                name: '最大值'
                            },
                            {
                                type: 'min',
                                name: '最小值'
                            }
                        ]
                    },
                }
            ]
        }
        echarts1.setOption(echarts1_option);
        // 框选效果
        echarts1.on('brushSelected', function (params) {
            console.log(params);
            var mainSeries = params.batch[0].selected[0];
            var mainSeries2 = params.batch[0].selected[1];
            var selectedItems = [];
            var selectedItems2 = [];
            console.log(mainSeries.dataIndex.length);
            console.log(mainSeries2.dataIndex.length);

            for (var i = 0; i < mainSeries.dataIndex.length; i++) {
                var rawIndex = mainSeries.dataIndex[i];
                var dataItem = Data1[rawIndex];
                selectedItems.push(dataItem);
            }
            for (var j = 0; j < mainSeries2.dataIndex.length; j++) {
                var rawIndex2 = mainSeries2.dataIndex[j];
                var dataItem2 = Data2[rawIndex2];
                selectedItems2.push(dataItem2);
            }
            console.log(selectedItems);
            console.log(selectedItems2);
            if(selectedItems.length > 0 || selectedItems2.length > 0){
                $("#echarts5-operate-7-modal").show();
            }else {
                $("#echarts5-operate-7-modal").hide();
            }
        });
        echarts1.on('legendunselected',function(){
            console.log('dddd');
        });
    }
    $(function(){
        rfm(300);
    });
</script>
</body>
</html>
